<!DOCTYPE html>
<html lang="zh-Hans-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./color.css">
  <style>
    .ex7,
    body,
    html {
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .ex7 .parent {
      display: grid;
      grid-gap: 1rem;
      grid-template-rows: repeat(3, 1fr) auto;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .pink {
      grid-row: 1/4;
    }
  </style>
</head>

<body>
  <div class="ex7">
    <div class="parent white">
      <div class="box pink">1</div>
      <div class="box purple">2</div>
      <div class="box blue">3</div>
      <div class="box green">4</div>
      <div class="box green">5</div>
    </div>
  </div>
  <div>
    <button onclick="myFunc()">点击</button>
  </div>
  <script>
    "use strict"
    const resizeObserver = new ResizeObserver(entries => {
      console.log(entries);
      for (let entry of entries) {
        console.log(entry.target);
      }
    });


    resizeObserver.observe(document.querySelector('.ex7'));

    window.onload = () => {
      console.log('onload');
      window.arr = []
      for (let i = 0; i < 10000; i++) {
        window.arr[i] = { index: i }
      }
    }

    function myFunc(params) {
      console.log('click');
      console.log(window.arr);
      console.time('foreach')
      window.arr.forEach((item) => {
        if (item.index === 1) {

        }
      })
      console.timeEnd('foreach')

      console.time('for')
      for (let i = 0; i < window.arr.length / 2; i++) {


      }
      console.timeEnd('for')
    }
  </script>
</body>

</html>